<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iChart.Coordinate2D-Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<link rel="stylesheet" href="../resources/style.css" type="text/css"/>

</head>
<body class='ichartjs_page'>
<div class='ichartjs_p_5'><div class='ichartjs_title ichartjs_radius2 ichartjs_p_5'><div class='ichartjs_inline ichartjs_left'>Overview&nbsp;&nbsp;</div><a class='ichartjs_anchor' href='#configs'>Configs</a><a class='ichartjs_anchor' href='#events'>Events</a><a class='ichartjs_anchor' href='#methods'>Methods</a></div><div class='ichartjs_overview_content'>
<span class='ichartjs_class'>Coordinate2D</span>&nbsp;&nbsp;<br/><div class='ichartjs_p_10 ichartjs_m_10 ichartjs_color ichartjs_inline ichartjs_radius5'><div class='ichartjs_font_600 ichartjs_h_25'>
Hierarchy</div>
<div class='ichartjs_h_18'><span class='ichartjs_h_18'><a href="ichart_element.html" target="main" >iChart.Element</a></span>
</div>
<div class='ichartjs_h_18'><span class='ichartjs_indent'><div class='ichartjs_tree'></div></span><span class='ichartjs_h_18'><a href="ichart_painter.html" target="main" >iChart.Painter</a></span>
</div>
<div class='ichartjs_h_18'><span class='ichartjs_indent'></span><span class='ichartjs_indent'><div class='ichartjs_tree'></div></span><span class='ichartjs_h_18'><a href="ichart_component.html" target="main" >iChart.Component</a></span>
</div>
<div class='ichartjs_h_18'><span class='ichartjs_indent'></span><span class='ichartjs_indent'></span><span class='ichartjs_indent'><div class='ichartjs_tree'></div></span><span class='ichartjs_h_18'><a href="ichart_coordinate2d.html" target="main" >iChart.Coordinate2D</a></span>
</div>
</div><br/>the coordinate2d componment<br/>
 <br/
</div></div><div class='ichartjs_p_5' id='configs' name='configs'><div class='ichartjs_title ichartjs_p_5'>Configs</div><table class='ichartjs_table'><tr class='ichartjs_table_header'><th class='ichartjs_table_parameter'>Parameter</th><th class='ichartjs_table_type'>Type</th><th class='ichartjs_table_description'>Description</th><th class='ichartjs_table_definedBy'>Defined By</th></tr><tr class='ichartjs_even'><td id='ichart_link_axis'>axis</td><td>Object</td><td>Specifies style for axis of this coordinate. Available property are:<br/>
 @Option enable {Boolean} True to display the axis.(default to true)<br/>
 @Option color {String} Specifies the color of each axis.(default to '#666666')<br/>
 @Option width {Number/Array} Specifies the width of each axis, If given the a array,there must be have have 4 element, like this:[1,0,0,1](top-right-bottom-left).(default to 1)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_background_color'>background_color</td><td>String</td><td>Here,specify as false to make background transparent.(default to null)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_border'>border</td><td>Object</td><td>Here,specify as true by default<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_color_factor'>color_factor</td><td>float</td><td>Specifies the factor make color dark or light for this element,relative to background-color,the bigger the value you set,the larger the color changed.scope{0.01 - 0.5}.(defaults to '0.15')<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_crosshair'>crosshair</td><td>Object</td><td>Specifies config crosshair.(default enable to false).For details see <a href='ichart_crosshair.html'>iChart.CrossHair</a> Note:this has a extra property named 'enable',indicate whether crosshair available(default to false)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_fontunit'>fontunit</td><td>String</td><td>Specifies the unit of font-size.(default to 'px')<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_component.html" target="main" >Component</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_gradient'>gradient</td><td>Boolean</td><td>True to apply the gradient.(default to false)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_gradient_mode'>gradient_mode</td><td>String</td><td>Specifies the gradient mode of background.(defaults to 'LinearGradientUpDown')<br/>
 @Option 'LinearGradientUpDown'<br/>
 @Option 'LinearGradientDownUp'<br/>
 @Option 'LinearGradientLeftRight'<br/>
 @Option 'LinearGradientRightLeft'<br/>
 @Option 'RadialGradientOutIn'<br/>
 @Option 'RadialGradientInOut'<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_grid_color'>grid_color</td><td>String</td><td>Specifies the color of the grid.(default to '#dbe1e1')<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_grid_line_width'>grid_line_width</td><td>Number</td><td>Specifies the linewidth of the grid.(default to 1)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_gridHStyle'>gridHStyle</td><td>Object</td><td>Specifies the stlye of horizontal grid.(default to empty object).Available property are:<br/>
 @Option solid {Boolean} True to draw a solid line.else draw a dotted line.(default to true)<br/>
 @Option size {Number} Specifies size of line segment when solid is false.(default to 10)<br/>
 @Option fator {Number} Specifies the times to size(default to 1)<br/>
 @Option width {Number} Specifies the width of grid line.(default to 1)<br/>
 @Option color {String} Specifies the color of grid line.(default to '#dbe1e1')<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_gridlinesVisible'>gridlinesVisible</td><td>Boolean</td><td>True to display grid line.(default to true)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_grids'>grids</td><td>Object</td><td>this is grid config for custom.there has two valid property horizontal and vertical.the property's sub property is: way:the manner calculate grid-line (default to 'share_alike') Available property are:<br/>
 @Option share_alike<br/>
 @Option given_value value: when property way apply to 'share_alike' this property mean to the number of grid's line.<br/>
  when apply to 'given_value' this property mean to the distance each grid line(unit:pixel) . <br/>
  code will like: <br/>
  { <br/>
   horizontal: {way:'share_alike',value:10},<br/>
   vertical: { way:'given_value', value:40 }<br/>
   }<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_gridVStyle'>gridVStyle</td><td>Object</td><td>Specifies the stlye of horizontal grid.(default to empty object).Available property are:<br/>
 @Option solid {Boolean} True to draw a solid line.else draw a dotted line.(default to true)<br/>
 @Option size {Number} Specifies size of line segment when solid is false.(default to 10)<br/>
 @Option fator {Number} Specifies the times to size(default to 1)<br/>
 @Option width {Number} Specifies the width of grid line.(default to 1)<br/>
 @Option color {String} Specifies the color of grid line.(default to '#dbe1e1')<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_height'>height</td><td>String/Number</td><td>Here,specify as '85%' relative to client height.(default to '85%')<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_ignoreEdge'>ignoreEdge</td><td>Boolean</td><td>If True the grid line will be ignored when gird and coordinate's edge overlap.(default to false)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_ignoreOverlap'>ignoreOverlap</td><td>Boolean</td><td>If True the grid line will be ignored when gird and axis overlap.(default to true)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_listeners'>listeners</td><td>Object</td><td>A config object containing one or more event handlers.(default to null)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_offsetx'>offsetx</td><td>Number</td><td>Specifies Horizontal offset(x-axis) in pixel.(default to 0)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_offsety'>offsety</td><td>Number</td><td>Specifies Vertical distance (y-axis) in pixel.(default to 0)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_originx'>originx</td><td>Number</td><td>If you want to totally override the positioning of the chart,you should setting it.(default to null)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_originy'>originy</td><td>Number</td><td>If you want to totally override the positioning of the chart,you should setting it.(default to null)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_padding'>padding</td><td>Number</td><td>Specifies the padding for this element in pixel,the same rule as css padding.(defaults to 10)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_scale'>scale</td><td>Array</td><td>the option for scale.For details see <a href='ichart_scale.html'>iChart.Scale</a><br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_scale2grid'>scale2grid</td><td>Boolean</td><td>indicate whether the grid is accord with scale,on the premise of grids is not specify. this just give a convenient way bulid grid for default.and actual value depend on scale's scale2grid<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_shadow'>shadow</td><td>Boolean</td><td>Specifies whether the element should be show a shadow.In general there will be get a high render speed when apply false.(default to false)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_element.html" target="main" >Element</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_shadow_blur'>shadow_blur</td><td>Number</td><td>Specifies How blur you want your shadow to be.(default to 4)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_element.html" target="main" >Element</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_shadow_color'>shadow_color</td><td>String</td><td>Specifies the color of your shadow is.(default to '#666666')<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_element.html" target="main" >Element</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_shadow_offsetx'>shadow_offsetx</td><td>Number</td><td>Specifies Horizontal distance (x-axis) between the shadow and the shape in pixel.(default to 0)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_element.html" target="main" >Element</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_shadow_offsety'>shadow_offsety</td><td>Number</td><td>Specifies Vertical distance (y-axis) between the shadow and the shape in pixel.(default to 0)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_element.html" target="main" >Element</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_striped'>striped</td><td>Boolean</td><td>True to stripe the axis.(default to true)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_striped_direction'>striped_direction</td><td>String</td><td>Specifies the direction apply striped color.(default to 'v')Available value are:<br/>
 @Option 'h' horizontal<br/>
 @Option 'v' vertical<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_striped_factor'>striped_factor</td><td>float(0.01 - 0.5)</td><td>Specifies the factor make color dark striped,relative to background-color,the bigger the value you set,the larger the color changed.(defaults to '0.01')<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_strokeStyle'>strokeStyle</td><td>String</td><td>Specifies the default strokeStyle of the canvas's context in this element.(defaults to 'gray')<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_valid_height'>valid_height</td><td>String/Number</td><td>Specifies the valid height,less than the height of coordinate.you can applies a percent value relative to width.(default to '100%')<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_valid_width'>valid_width</td><td>String/Number</td><td>Specifies the valid width,less than the width of coordinate.you can applies a percent value relative to width.(default to '100%')<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_even'><td id='ichart_link_width'>width</td><td>String/Number</td><td>Here,specify as '85%' relative to client width.(default to '85%')<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr><tr class='ichartjs_odd'><td id='ichart_link_z_index'>z_index</td><td>Number</td><td>Override the default as -1 to make sure it at the bottom.(default to -1)<br/></td><td class='ichartjs_right ichartjs_stress'><a href="ichart_coordinate2d.html" target="main" >Coordinate2D</a></td></tr></table></div><div class='ichartjs_p_5' id='events' name='events'><div class='ichartjs_title ichartjs_p_5'>Events</div><table class='ichartjs_table'><tr class='ichartjs_table_header'><th class='ichartjs_table_parameter'>Name</th><th class='ichartjs_table_description'>Description</th><th class='ichartjs_table_definedBy'>Defined By</th></tr><tr class='ichartjs_even'><td>beforedraw</td><td><div class='ichartjs_h_25 ichartjs_pl_10'>Fires before the element drawing.Return false from an event handler to stop the draw.<br/></div>
<div class='ichartjs_h_25 ichartjs_pl_10'><div class='ichartjs_stress'>Parameter<br/></div>
<div class='ichartjs_pl_10'><ul><li>this&nbsp;:&nbsp;Coordinate2D&nbsp;&nbsp;</li>
</ul></div></div>
</td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_odd'><td>click</td><td><div class='ichartjs_h_25 ichartjs_pl_10'>Fires when this element is clicked<br/></div>
<div class='ichartjs_h_25 ichartjs_pl_10'><div class='ichartjs_stress'>Parameter<br/></div>
<div class='ichartjs_pl_10'><ul><li>this&nbsp;:&nbsp;Coordinate2D&nbsp;&nbsp;</li>
<li>e&nbsp;:&nbsp;EventObject&nbsp;&nbsp; The click event object</li>
<li>param&nbsp;:&nbsp;Object&nbsp;&nbsp; The additional parameter</li>
</ul></div></div>
</td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_even'><td>draw</td><td><div class='ichartjs_h_25 ichartjs_pl_10'>Fires after the element drawing when calling the draw method.<br/></div>
<div class='ichartjs_h_25 ichartjs_pl_10'><div class='ichartjs_stress'>Parameter<br/></div>
<div class='ichartjs_pl_10'><ul><li>this&nbsp;:&nbsp;Coordinate2D&nbsp;&nbsp;</li>
</ul></div></div>
</td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_odd'><td>initialize</td><td><div class='ichartjs_h_25 ichartjs_pl_10'>Fires after the element initializing is finished this is for test<br/></div>
<div class='ichartjs_h_25 ichartjs_pl_10'><div class='ichartjs_stress'>Parameter<br/></div>
<div class='ichartjs_pl_10'><ul><li>this&nbsp;:&nbsp;Coordinate2D&nbsp;&nbsp;</li>
</ul></div></div>
</td><td class='ichartjs_right ichartjs_stress'><a href="ichart_element.html" target="main" >Element</a></td></tr><tr class='ichartjs_even'><td>mousemove</td><td><div class='ichartjs_h_25 ichartjs_pl_10'>Fires when the mouse move on the element<br/></div>
<div class='ichartjs_h_25 ichartjs_pl_10'><div class='ichartjs_stress'>Parameter<br/></div>
<div class='ichartjs_pl_10'><ul><li>this&nbsp;:&nbsp;Coordinate2D&nbsp;&nbsp;</li>
<li>e&nbsp;:&nbsp;EventObject&nbsp;&nbsp; The mousemove event object</li>
</ul></div></div>
</td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_odd'><td>mouseout</td><td><div class='ichartjs_h_25 ichartjs_pl_10'>Fires when the mouse exits the element<br/></div>
<div class='ichartjs_h_25 ichartjs_pl_10'><div class='ichartjs_stress'>Parameter<br/></div>
<div class='ichartjs_pl_10'><ul><li>this&nbsp;:&nbsp;Coordinate2D&nbsp;&nbsp;</li>
<li>e&nbsp;:&nbsp;EventObject&nbsp;&nbsp; The mouseout event object</li>
</ul></div></div>
</td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_even'><td>mouseover</td><td><div class='ichartjs_h_25 ichartjs_pl_10'>Fires when the mouse hovers over the element<br/></div>
<div class='ichartjs_h_25 ichartjs_pl_10'><div class='ichartjs_stress'>Parameter<br/></div>
<div class='ichartjs_pl_10'><ul><li>this&nbsp;:&nbsp;Coordinate2D&nbsp;&nbsp;</li>
<li>e&nbsp;:&nbsp;EventObject&nbsp;&nbsp; The mouseover event object</li>
</ul></div></div>
</td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr></table></div><div class='ichartjs_p_5' id='methods' name='methods'><div class='ichartjs_title ichartjs_p_5'>Methods</div><table class='ichartjs_table'><tr class='ichartjs_table_header'><th class='ichartjs_table_parameter'>Name</th><th class='ichartjs_table_description'>Description</th><th class='ichartjs_table_definedBy'>Defined By</th></tr><tr class='ichartjs_even'><td>draw</td><td><div class='ichartjs_h_25 ichartjs_pl_10'>The commnd fire to draw the chart use configuration,<br/>
	 * this is a abstract method.Currently known,both <a href='ichart_chart.html'>iChart.Chart</a> and <a href='ichart_component.html'>iChart.Component</a> implement this method.<br/></div>
<div class='ichartjs_h_25 ichartjs_pl_10'><div class='ichartjs_stress'>Parameter<br/></div>
<div class='ichartjs_pl_10'><ul><li>None<br/></li>
</ul></div>
<div class='ichartjs_stress'>Return<br/></div>
<div class='ichartjs_pl_10'>&nbsp;&nbsp;void</div>
</div>
</td><td class='ichartjs_right ichartjs_stress'><a href="ichart_painter.html" target="main" >Painter</a></td></tr><tr class='ichartjs_odd'><td>getDimension</td><td><div class='ichartjs_h_25 ichartjs_pl_10'>return the component's dimension,return hold following property<br/>
	 * @property x:the left-top coordinate-x<br/>
	 * @property y:the left-top coordinate-y<br/>
	 * @property width:the width of component,note:available there applies box model<br/>
	 * @property height:the height of component,note:available there applies box model<br/></div>
<div class='ichartjs_h_25 ichartjs_pl_10'><div class='ichartjs_stress'>Parameter<br/></div>
<div class='ichartjs_pl_10'><ul><li>None<br/></li>
</ul></div>
<div class='ichartjs_stress'>Return<br/></div>
<div class='ichartjs_pl_10'>&nbsp;&nbsp;object</div>
</div>
</td><td class='ichartjs_right ichartjs_stress'><a href="ichart_component.html" target="main" >Component</a></td></tr></table></div><div class='ichartjs_reference'><strong>reference:</strong><span class='ichartjs_reference_item'><a href="ichart_component.html" target="main" >Component</a></span></div>
</body>
</html>